<template>
  <span>
    <template v-if="node.string">
      <h1>
        <i>{{ node.string }}</i>
      </h1>
    </template>
    <a-row>
      <template v-for="node2 in node.children || {}" :key="node2.nodename">
        <template v-if="node2.tagname === 'group'">
          <a-col :span="(node.col || 12) * (node2.colspan || 1)">
            <!-- {{ node2.nodename }} -->
            <TagGroupSub
              :model="model2"
              :node="node2"
              :formInfo="formInfo"
              @change="onChange"
            />
          </a-col>
        </template>

        <template v-else-if="node2.tagname === 't'">
          <a-col :span="node.col || 12">
            <template
              v-for="node3 in node2.children || {}"
              :key="node3.nodename"
            >
              <template v-if="node3.tagname === 'group'">
                <TagGroupSub
                  :model="model2"
                  :node="node3"
                  :formInfo="formInfo"
                  @change="onChange"
                />
              </template>

              <template v-else>
                <TagNode
                  :model="model2"
                  :node="node3"
                  :formInfo="formInfo"
                  @change="onChange"
                />
              </template>
            </template>
          </a-col>
        </template>

        <template v-else>
          <a-col :span="node.col || 12">
            <TagNode
              :model="model2"
              :node="node2"
              :formInfo="formInfo"
              @change="onChange"
            />
          </a-col>
        </template>
      </template>
    </a-row>
  </span>
</template>

<script setup>
import TagNode from './TagNode.vue'
import TagGroupSub from './TagGroupSub.vue'

import { computed } from 'vue'

const props = defineProps(['model', 'node', 'formInfo'])
const emit = defineEmits(['change'])
const model2 = computed({
  get() {
    return props.model || {}
  },

  // eslint-disable-next-line no-unused-vars
  set(val) {
    // state.mVal = {...}
  }
})
function onChange(fname, value) {
  // console.log('onChange  ', fname, value)
  emit('change', fname, value)
}
</script>

<style type="text/css"></style>
